<template>
	<view class="search-container">
		<!-- 搜索框独立出来并固定在顶部 -->
		<view class="search-box">
			<view class="search-input-container">
				<input 
					v-model="searchKey" 
					type="text" 
					placeholder="请输入类型搜索"
					@input="handleSearch"
				/>
				<view 
					class="reset-button"
					@click="resetSearch"
				>
					重置
				</view>
			</view>
		</view>
		
		<!-- 类型列表容器 -->
		<view class="content-container">
			<view class="type-list">
				<!-- 添加条件：只有当filteredTypes有数据时才显示列表 -->
				<view v-if="filteredTypes.length > 0">
					<view 
						class="type-item" 
						v-for="type in filteredTypes" 
						:key="type"
						@click="selectType(type)"
					>
						{{ type }}
					</view>
				</view>
				<!-- 无匹配数据时显示提示信息 -->
				<view v-else-if="searchKey" class="no-data">
					没有找到匹配的类型
				</view>
			</view>
			
			<!-- 学校列表 -->
			<view class="school-list" v-if="selectedType">
				<view 
					class="school-group" 
					v-for="school in uniqueSchools" 
					:key="school.id"
				>
					<!-- 学校名称 -->
					<view 
						class="school-item"
						:class="{'selected': selectedSchool && selectedSchool.name === school.name}"
						@click="selectSchool(school)"
					>
						{{ school.name }}
					</view>

					<!-- 专业列表 -->
					<view class="class-list" v-if="selectedSchool && selectedSchool.name === school.name">
						<view 
							class="class-item"
							v-for="classItem in getClassList(school.name)"
							:key="classItem.id"
							:class="{'selected': selectedClass && selectedClass.id === classItem.id}"
							@click="selectClass(classItem)"
						>
							{{ classItem.classname }}
						</view>
						
						<!-- 详细信息 -->
						<view class="detail-info" v-if="selectedClass && detailInfo">
							<view class="info-section">
								
								<view class="info-item">
									<text class="label">学校：</text>
									<text class="value">{{detailInfo.school}}</text>
								</view>
								<view class="info-item">
									<text class="label">专业：</text>
									<text class="value">{{detailInfo.classname}}</text>
								</view>
								<view class="info-item">
									<text class="label">计划数：</text>
									<text class="value">{{detailInfo.num}}</text>
								</view>
								<view class="info-item">
									<text class="label">学费/年：</text>
									<text class="value">{{detailInfo.fee}}元</text>
								</view>
							</view>

							<view class="score-section">
								<view class="section-title">历年投档线</view>
								<view class="info-item">
									<text class="label">2025年：</text>
									<text class="value">{{detailInfo.tdxj}}</text>
								</view>
								<view class="info-item">
									<text class="label">2024年：</text>
									<text class="value">{{detailInfo.tdxq}}</text>
								</view>
								<view class="info-item">
									<text class="label">2023年：</text>
									<text class="value">{{detailInfo.tdxqq}}</text>
								</view>
							</view>

							<view class="remark-section" v-if="detailInfo.remark">
								<view class="section-title">备注</view>
								<view class="remark-content">{{detailInfo.remark}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchList: [], // 原始数据列表
				searchKey: '', // 搜索关键词
				selectedType: null, // 选中的类型
				selectedSchool: null, // 选中的学校
				selectedClass: null, // 选中的专业
				schoolList: [], // 学校列表
				detailInfo: null, // 详细信息
			}
		},
		computed: {
			filteredTypes() {
				return [...new Set(this.searchList
					.filter(item => !this.searchKey || item.type.toLowerCase().includes(this.searchKey.toLowerCase()))
					.map(item => item.type))]
			},
			// 过滤出不重复的学校列表
			uniqueSchools() {
				if (!this.selectedType) return []
				const schools = this.searchList
					.filter(item => item.type === this.selectedType)
					.map(item => ({
						id: item.id,
						name: item.school
					}))
				// 去重
				return [...new Map(schools.map(item => [item.name, item])).values()]
			}
		},
		
		onLoad() {
			this.loadSearchData()
		},
		methods: {
			// 页面加载时获取数据
			loadSearchData() {
				this.request('loadSearch', 'GET').then(res => {
					this.searchList = res.data
				}).catch(err => {
					console.error('加载数据失败：', err)
					uni.showToast({
						title: '数据加载失败',
						icon: 'none'
					})
				})
			},
			
			// 处理搜索输入
			handleSearch() {
				this.selectedType = null
				this.selectedSchool = null
				this.selectedClass = null
				this.detailInfo = null
			},

			// 选择类型
			selectType(type) {
				this.selectedType = type
				this.selectedSchool = null
				this.selectedClass = null
				this.detailInfo = null
			},

			// 选择学校
			selectSchool(school) {
				if (this.selectedSchool && this.selectedSchool.name === school.name) {
					// 再次点击同一所学校时折叠
					this.selectedSchool = null
					this.selectedClass = null
					this.detailInfo = null
				} else {
					this.selectedSchool = school
					this.selectedClass = null
					this.detailInfo = null
				}
			},

			// 获取指定学校的专业列表
			getClassList(schoolName) {
				return this.searchList.filter(item => 
					item.type === this.selectedType && 
					item.school === schoolName
				)
			},

			// 选择专业
			selectClass(classItem) {
				if (this.selectedClass && this.selectedClass.id === classItem.id) {
					// 再次点击同一个专业时折叠
					this.selectedClass = null
					this.detailInfo = null
				} else {
					this.selectedClass = classItem
					this.detailInfo = classItem
				}
			},

			// 添加重置方法
			resetSearch() {
				this.searchKey = ''
				this.selectedType = null
				this.selectedSchool = null
				this.selectedClass = null
				this.detailInfo = null
			}
		}
	}
</script>

<style>
.search-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	position: relative; /* 添加相对定位 */
}

.search-box {
	position: fixed;
	top: 100px; /* 改为100px */
	left: 0;
	right: 0;
	z-index: 100;
	padding: 20rpx;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.search-input-container {
	width: 90%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.search-box input {
	flex: 1;
	height: 80rpx;
	border: 1px solid #ddd;
	border-radius: 40rpx;
	padding: 0 30rpx;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.reset-button {
	padding: 0 30rpx;
	height: 80rpx;
	line-height: 80rpx;
	background: #5177ee;
	color: white;
	border-radius: 40rpx;
	font-size: 28rpx;
	text-align: center;
	box-shadow: 0 2px 10px rgba(81, 119, 238, 0.2);
	transition: all 0.3s ease;
}

.reset-button:active {
	transform: scale(0.95);
	background: #4066d6;
}

.content-container {
	padding: calc(100px + 140rpx) 20rpx 20rpx; /* 相应地将上方padding调整为100px + 140rpx */
}

.type-list {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20rpx;
	padding: 20rpx;
	max-height: calc(7 * 100rpx); /* 从10行改为7行 */
	overflow-y: auto;
}

.type-item {
	padding: 0 30rpx; /* 修改内边距 */
	height: 100rpx; /* 固定每行高度为100rpx */
	line-height: 100rpx; /* 行高与高度一致，实现垂直居中 */
	border-bottom: 1px solid #eee;
	font-size: 32rpx; /* 设置合适的字体大小 */
	white-space: nowrap; /* 防止文字换行 */
	overflow: hidden; /* 超出部分隐藏 */
	text-overflow: ellipsis; /* 超出显示省略号 */
}

/* 添加点击效果 */
.type-item:active {
	background-color: rgba(0, 0, 0, 0.05);
}

/* 美化滚动条样式 */
.type-list::-webkit-scrollbar {
	width: 6rpx;
}

.type-list::-webkit-scrollbar-thumb {
	background-color: #c3cfe2;
	border-radius: 3rpx;
}

.type-list::-webkit-scrollbar-track {
	background-color: transparent;
}

.school-list {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20rpx;
	padding: 20rpx;
	margin-top: 20rpx;
}

.school-group {
	margin-bottom: 10rpx;
}

.school-item {
	padding: 20rpx;
	border-bottom: 1px solid #eee;
	position: relative; /* 添加相对定位 */
}

/* 添加选中状态样式 */
.school-item.selected {
	background-color: rgba(195, 207, 226, 0.3);
	font-weight: bold;
	border-left: 4rpx solid #5177ee;
}

/* 添加点击效果 */
.school-item:active {
	background-color: rgba(0, 0, 0, 0.05);
}

.class-list {
	background: rgba(255, 255, 255, 0.8);
	margin-left: 40rpx;
	border-left: 4rpx solid #c3cfe2;
}

.class-item {
	padding: 20rpx 30rpx;
	font-size: 28rpx;
	border-bottom: 1px solid #eee;
	color: #666;
}

.class-item.selected {
	background-color: rgba(195, 207, 226, 0.2);
	color: #333;
	font-weight: bold;
}

.class-item:active {
	background-color: rgba(0, 0, 0, 0.05);
}

.detail-info {
	margin: 10rpx 20rpx;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 12rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.info-section, .score-section, .remark-section {
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	padding-bottom: 10rpx;
	border-bottom: 2rpx solid #eee;
}

.info-item {
	padding: 15rpx 0;
	display: flex;
	align-items: center;
}

.label {
	font-weight: bold;
	color: #666;
	width: 180rpx;
}

.value {
	color: #333;
	flex: 1;
}

.remark-content {
	color: #666;
	line-height: 1.6;
	font-size: 28rpx;
}

.no-data {
	text-align: center;
	padding: 30rpx;
	color: #999;
	font-size: 28rpx;
}
</style>
